<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	
	<h1 align="middle" style="font-size: 50px">面试详细信息</h1>
	<div id="mainQuestion" align="middle">
		
	<!-- 	<span>面试公司</span>
				<!-- <td>面试公司</td>
				<td>面试岗位</td>	 -->
		<!-- <span>面试岗位</span> --> 
		
		<table id="table" border="1" height="70px" width="1000" style="text-align: center;">
			
			<tr>
				<td>序号</td>
				<td>面试问题</td>	
				<td>学生回答</td>
				<td>老师回答</td>
				<td><button>新增</button></td>
			</tr>
			<tr v-for="(question,index) in questionList">
				<td>{{index+1}}</td>
				<td>{{question.question}}</td>
				<td>{{question.studentAnswer}}</td> 
				<td>{{question.teacherAnswer}}</td>
				<td><button>修改</button><button>删除</button></td>
			</tr>
			
			
		</table>
		
	</div>
	
</body>

	<script>
		window.onload = function() {
				var table = new Vue({
				el: '#table',
				data: {
					questionList: {},
				},
				methods:{
					get: function() {
						var url = 'http://localhost:8080/kaoqin/question/findAllQuestion';
						this.$http.get(url).then(function(backdatas) {
							// 拿到code码
							var code = backdatas.body.code;
							
							// 拿到后台返回的数据
							var dataR = backdatas.body.data;
							
							// 把 dataR 给 table的roleList属性
							table.questionList = dataR;
							console.log(table.questionList)
						});
					},
				},
				
			});
			table.get();
		}
		
		
		
	</script>

</html>